<template>
  <div id="loginContent">
    <div id="login">
      <el-form :rules="LoginRules" :model="loginParam" ref="loginForm" style="max-width: 600px" @keydown.enter="login">
        <el-form-item prop="accountName">
          <el-input placeholder="用户名" v-model="loginParam.accountName"/>
        </el-form-item>
        <el-form-item prop="accountPassword">
          <el-input placeholder="密码" v-model="loginParam.accountPassword"/>
        </el-form-item>
        <el-form-item prop="checkCode">
          <el-input placeholder="验证码" style="width: 183px" v-model="loginParam.checkCode"/>
          <el-image style="height: 30px" @click="getCode" :src="checked"/>
        </el-form-item>
        <el-form-item>
          <el-button color="#626aef" :loading="loading" style="width: 100%;border-radius: 10px;" type="primary"
                     @click="login">登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>

</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import {checkCodeApi, loginApi} from "@/api/sys/LoginApi";
import {ElNotification} from "element-plus";
import router from "@/router";
import {useAccountStore} from "@/stores/counter";
import {constructMenuRouter} from "@/router/ConstructMenuRouter";
import {LoginParameter} from "@/resources/parameters/sys/LoginParameter";
import type {LoginType} from "@/resources/interface/sys/LoginTypes";
import {LoginRules} from "@/resources/rules/sys/LoginRules";
import type {ResultType} from "@/resources/interface/ResultType";
import {setToken} from "@/util/TokenUtil";

const loginParam = reactive<LoginType>(LoginParameter)
const loginForm = ref()
const loading = ref(false)
const checked = ref('')


const login = async () => {
  await loginForm.value?.validate(async (valid: any, fields: any) => {
    if (valid) {
      loading.value = true;
      loginApi(loginParam).then(async (result: ResultType) => {
        ElNotification.success(result.message)
        //保存token
        setToken(result.data.token)
        //保存用户信息
        let accountStore = useAccountStore();
        result.data.token = '';
        accountStore.saveAccount(JSON.stringify(result.data));
        // 获取菜单
        await constructMenuRouter([]);
        loading.value = false;
        await router.push("/")
      }).catch(() => {
        loading.value = false;
        getCode();
      })
    } else {
      ElNotification.error('请输入正确的登录信息')
    }
  })
}
const getCode = async () => {
  let result = await checkCodeApi();
  checked.value = result.data
}
onMounted(() => {
  getCode();
})
</script>

<style scoped>
#loginContent {
  display: flex;
  width: 100%;
  min-height: 100vh;
  background-image: url("/src/assets/background.png");
  background-size: 100% 100%;
  background-attachment: fixed;
  justify-content: center;
  align-items: center;
  height: 100vh;

}

#login {
  width: 300px;
  padding: 20px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

}
</style>
